import React, { Component } from 'react';
import { Card, Table, Button, Icon, Modal, Result, message } from 'antd';

import AddUpdateForm from './add-update-form';
import LinkButton from '../../components/link-button';
import './category.less';

export default class Category extends Component {
    constructor(props) {
        super(props)
        this.state = {
            loading: false,
            visibleStatus: 0, // 0不显示, 1显示添加, 2显示编辑
            columns: [
                {
                    title: 'Name',
                    dataIndex: 'name',
                    render: text => <a>{text}</a>,
                },
                {
                    title: 'Cash Assets',
                    className: 'column-money',
                    dataIndex: 'money',
                },
                {
                    title: 'Address',
                    dataIndex: 'address',
                },
                {
                    title: '操作',
                    render: (item) => (<div><LinkButton onClick={() => this.onClickEdit(item)}>编辑</LinkButton><LinkButton>删除</LinkButton></div>)
                },
            ],
            data: [
                {
                    key: '1',
                    name: 'John Brown',
                    money: '￥300,000.00',
                    address: 'New York No. 1 Lake Park',
                },
                {
                    key: '2',
                    name: 'Jim Green',
                    money: '￥1,256,000.00',
                    address: 'London No. 1 Lake Park',
                },
                {
                    key: '3',
                    name: 'Joe Black',
                    money: '￥120,000.00',
                    address: 'Sidney No. 1 Lake Park',
                },
                {
                    key: '4',
                    name: 'Jim Green',
                    money: '￥1,256,000.00',
                    address: 'London No. 1 Lake Park',
                },
                {
                    key: '5',
                    name: 'Joe Black',
                    money: '￥120,000.00',
                    address: 'Sidney No. 1 Lake Park',
                },
                {
                    key: '6',
                    name: 'John',
                    money: '￥300,000.00',
                    address: 'New York No. 1 Lake Park',
                },
                {
                    key: '7',
                    name: 'Jim',
                    money: '￥1,256,000.00',
                    address: 'London No. 1 Lake Park',
                },
                {
                    key: '8',
                    name: 'Joe',
                    money: '￥120,000.00',
                    address: 'Sidney No. 1 Lake Park',
                },
                {
                    key: '9',
                    name: 'Jim',
                    money: '￥1,256,000.00',
                    address: 'London No. 1 Lake Park',
                },
                {
                    key: '10',
                    name: 'Joe',
                    money: '￥120,000.00',
                    address: 'Sidney No. 1 Lake Park',
                },
            ]
        }
    }

    onClickAdd = () => {
        this.item = {};
        this.setState({ visibleStatus: 1 });
    }

    onClickEdit = (item) => {
        this.setState({ visibleStatus: 2 });
        this.item = item;
        // console.log('onClickEdit', item.name);
    }

    handleOk = () => {
        // 表单验证
        this.form.validateFields((err, values) => {
            // alert(values);
            if (!err) {
                // 表单验证通过，去发送请求数据
                console.log('send request: ', values);
                setInterval(() => {
                    this.setState({ visibleStatus: 0 });
                    this.form.resetFields();
                }, 3000);

                // 异步发送ajax请求
                // if(result.status === 0) {
                //     // refresh list, and notify success
                //     message.success('catagory added');
                // } else {
                //     message.error('add catagory failed');
                // }
            }
        });
    
    }

    handleCancel = () => {
        this.setState({ visibleStatus: 0 });
        this.form.resetFields();
    }

    render() {
        const extra = (
            <Button type="primary" onClick={() => this.onClickAdd()}>
                <Icon type="plus" />
                添加
            </Button>
        )
        
        const item = this.item || {};
        return (
            <div className="container">
                <Card extra={extra} style={{}}>
                    <Table
                        className="ant-table-tbody"
                        columns={this.state.columns}
                        dataSource={this.state.data}
                        bordered
                        loading={this.state.loading}
                        pagination={{defaultPageSize:5,}}
                    />
                </Card>
                <Modal
                    title={this.state.visibleStatus === 1 ? "添加分类" : "编辑分类" }
                    visible={this.state.visibleStatus}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    {/* 将子组件传递过来的form对象保存到当前组件上 */}
                    <AddUpdateForm setForm={form => this.form = form} name={item.name} />
                </Modal>
            </div>
        )
    }
}
